<template>
  <div>
    <button @click="add">添加</button>
    <button @click="pop">删除</button>
  </div>
  <transition-group
    tag="list"
    enter-active-class="animate__animated animate__fadeInRight"
    leave-active-class="animate__animated animate__rotateOutUpRight"
  >
    <span class="item" :key="item" v-for="item in list">{{ item }}</span>
  </transition-group>
</template>

<script setup lang="ts">
/**
 * 默认情况下，它不会渲染一个包裹元素，但是可以通过 tag attribute 指定渲染一个元素。
 * 过渡模式不可用，因为我们不再相互切换特有的元素。
 * 内部元素总是需要提供唯一的 key attribute 值。
 * CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
 */
import { reactive } from 'vue';
import 'animate.css';
const list = reactive<number[]>([1, 2, 3, 4, 5]);
const add = (): void => {
  list.push(list.length + 1);
};
const pop = (): void => {
  list.pop();
};
</script>

<style lang="scss" scoped>
.item {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  font-size: 32px;
}
</style>
